<template>
	<view class="wrap">
		<view class="search">
			<u-search placeholder="搜索草稿" placeholder-style="color:#ffffff" :showAction="false" :bgColor="colors"
				v-model="keyword" height="70" margin="10rpx 0" @clear="clearMd" search-icon-color="#ffffff"
				@search="searchMd" @change="$u.debounce(searchMd, 800)" input-style="color:#ffffff">
			</u-search>
		</view>
		<u-empty text="暂无我的草稿" mode="message" v-if="!MDList.length"></u-empty>
		<view class="" v-else>
			<scroll-view scroll-y="true" enable-flex style="height: calc(100vh - 180rpx);" refresher-enabled
				@refresherrefresh="handleRefresh" @scrolltolower="handleTolower()" :refresher-triggered="isRefresh"
				class="listContent">
				<view class="left">
					<block class="itemlist" v-for="(item, index) in MDList" :key="item._id">
						<view class="card" v-if="index%2==0" @click="toMemorandumDetail(item._id)"
							@longpress="deleteMd(item._id)">
							<view class="cot">
								<view class="title">{{item.title}}</view>
								<view class="text">{{item.content}}</view>
							</view>
							<view class="time">{{$u.timeFormat(item.createTime, 'mm月dd日')}}</view>
						</view>
					</block>
				</view>
				<view class="right">
					<block class="itemlist" v-for="(item, index) in MDList" :key="item._id">
						<view class="card" v-if="index%2==1" @click="toMemorandumDetail(item._id)"
							@longpress="deleteMd(item._id)">
							<view class="cot">
								<view class="title">{{item.title}}</view>
								<view class="text">{{item.content}}</view>
							</view>
							<view class="time">{{$u.timeFormat(item.createTime, 'mm月dd日')}}</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="publish_btn" :style="{'background-color' : colors}">
			<!-- <u-button shape="circle" iconColor="#31B6C3" @click="publishMD"></u-button> -->
			<view class="iconfont icon-jiajianzujianjiahao" @click="publishMD">

			</view>
		</view>
	</view>
</template>

<script>
	import * as cloudApi from '@/utils/cloudApi.js'
	export default {
		data() {
			return {
				keyword: '',
				MDList: {},
				isRefresh: false, // 标示scroll-view下拉刷新是否被触发
				token: null,
				userInfo: {},
				colors: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.colors
			})
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
			this.token = uni.getStorageSync("token") || getApp().globalData.token
			this.colors = this.userInfo.themeColors || '#F3C301'
			this.getMemorandumList()
			uni.$on("getMd", () => {
				this.getMemorandumList()
			})
		},
		methods: {
			setColor(e) {
				// 代表在搜索关键字中存在相匹配的串
				console.log(this.keyword.indexOf(e) == -1);
				if (this.keyword.indexOf(e) == -1) {
					return 'color:#007AFF;'
				}
			},
			clearMd() {
				this.keyword = ''
				this.getMemorandumList()
			},
			toMemorandumDetail(id) {
				uni.navigateTo({
					url: '/subpages/memorandum/publishMD?id=' + id
				})
				console.log(id);
			},
			searchMd() { // 搜索便签
				cloudApi.call({
					name: 'memorandum',
					data: {
						api: 'searchMd',
						keyword: this.keyword
					},
					success: res => {
						console.log(res);
						this.MDList = res.result.data
						this.setColor()
					}
				})
			},
			deleteMd(id) {
				console.log("长按触发事件?", id)
				uni.showModal({
					title: '是否删除此草稿？',
					confirmColor: '#0099ff',
					cancelColor: '#000000',
					success: async (res) => {
						if (res.confirm) {
							cloudApi.call({
								name: 'memorandum',
								data: {
									api: 'MdById',
									action: 'delete',
									_id: id
								},
								success: res => {
									console.log(res);
									uni.$emit('getMd')
									this.$showToast('删除成功', 'none')
								}
							})
						}
					}
				})
			},


			getMemorandumList() {
				cloudApi.call({
					name: 'memorandum',
					data: {
						api: 'getMemorandumApi',
						token: this.token
					},
					success: (res) => {
						this.MDList = res.result.data
						this.isRefresh = false
					},
					fail: err => {
						this.$showToast('获取失败', 'none')
					}
				})
			},
			publishMD() { // 发布备忘录 跳转
				uni.navigateTo({
					url: '/subpages/memorandum/publishMD'
				})
			},
			handleTolower() { // 自定义上拉加载

			},
			handleRefresh() { // 下拉刷新
				uni.showLoading({
					title: '正在刷新'
				})
				setTimeout(() => {
					this.getMemorandumList()
					this.$showToast('刷新成功', 'none')
				}, 1000)
				this.isRefresh = true
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 0 15rpx;

		.search {
			margin: 20rpx 30rpx;

			.placeholder {
				font-size: 38rpx;
			}
		}

		.publish_btn {
			position: fixed;
			bottom: 5vh;
			right: 5vh;

			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			line-height: 100rpx;

			.iconfont {
				color: #fff;
				font-size: 40rpx;
				text-align: center;
			}
		}

		.listContent {

			.left,
			.right {
				display: inline-block;
				vertical-align: top;
				width: 49%;
			}

			.itemlist {
				background-color: #fff;
				margin: 1%;
				margin-bottom: 20upx;
				display: inline-block;

			}

			.card {
				margin: 20rpx 10rpx;
				background-color: #ffffff;
				border-radius: 20rpx;
				padding: 30rpx 25rpx;
				box-shadow: 0 0 10px #ddd;
				/* 盒子阴影*/

				.cot {

					.title {
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.text {
						color: #666;
						font-size: 26rpx;
						overflow: hidden;
						margin-bottom: 15rpx;
						line-height: 50rpx;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						/*设置对其模式*/
						-webkit-line-clamp: 4;
						/*设置多行的行数*/
					}

					.time {
						color: #666;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
